<template>
<div>
	<!-- <div>
		<div>
			<img src="/static/images/search-empty.png" alt="">
		</div>
	</div> -->
	<div class="cart">
		<header>
			<p> 
				<span  class="iconfont" @click="jump($router)">&#xe697;</span>
				<span class="gouwu">购物车</span>
				<span class="bianji">编辑</span>
			</p>			
		</header>
		<div v-for="foot in getFoot" class="xgcart2">
			<div class='checkbox'> 
                <input type="checkbox" id='swimm' />  
            </div> 
			<div class="zxhfx1">
				<img :src="foot.picUrl">				
			</div>
			<div class="zxhfx2">
				<p>{{foot.name}}</p>
				<div class="zxhfx2a">
					<p><span>￥{{foot.availablePrice}}</span></p>
					<div class="zxhfx2b">
						<button @click="addmoney(foot,-1)">-</button>
						<span type="text" :a='a'>{{foot.num}}</span>
						<button @click="addmoney(foot,1)">+</button>
						<p></p>
					</div>
					
				</div>
				
			</div>
			<div class="js">
				<label for="swimm" class='checkbox'> 
	                <input type="checkbox" id='swimm' />&nbsp;&nbsp;全选  
	            </label> 
	            <div class="jsa">
	            	<p>合计：￥{{total}}</p>
	            	<p>
	            		以优惠：￥0.00，不含运费
	            	</p>
	            </div>
	            <div class="jsb">
	            	去结算()
	            </div>
			</div>
		</div>
		
	</div>
</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return {
				a:0,
				thisn:"",
				total:""
			}
			
		},
		//计算属性

		methods:{
			addmoney(shop,z){
				this.a++
				this.total = ""
				if (z<0 && shop.num<=0) {

				}else{
					shop.num+=z;
					z=shop.num;
					this.total+=(z*shop.availablePrice).toFixed(2);
					console.log(z)
					console.log(shop.num)
					console.log(this.total)
				}

			},
			jump(str){
				str.go(-1);
			}
		},

		computed:{
			getFoot(){
				return this.$store.state.cartFoots;
			}
		}
	}
</script>

<style type="text/css" scoped>
.js{
	position: fixed;bottom:1.5rem;
	left: 0;right: 0;
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	height: 1.3rem;
	background: #333;
}
.js>label{
	width: 20%;
	color: #fff;
	height: 100%;
}
.js>.jsa{
	width: 50%;
	color: #fff;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	margin-right: .3rem;
}
.js>.jsb{
	width: 30%;
	color: #fff;
	background: #ff7900;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.zxhfx2{
	position: relative;
	width: 70%;
}
.zxhfx2>.zxhfx2a{
	position: absolute;
	width: 80%;
	bottom: .3rem;
	color: #ff6900;
	display: flex;
	justify-content: space-between;
}
.zxhfx2b{
	display: flex;
	margin-bottom: 0.1rem;
	color: #000;


}
.zxhfx2b>button{
	width: 1rem;
	height: .6rem;
	font-size: .5rem;
	margin-left: .3rem;
	background: #fff;
	outline-style: none;
	 border: 1px solid #e5e5e5;
}
.zxhfx2b>span{
	margin-left: .3rem;
	display: inline-block;
	height: .6rem;
	line-height: .6rem;
	height: .7rem;
}
.cart{
	margin-top: 1.5rem;
}
.zxhfx1{
		margin-top: .3rem;
		width: 20%;
		margin-left: .4566rem;
		margin-right: 0;
	}
	.zxhfx1>img{
		width: 100%;
	}
.xgcart2{
		display: flex;
	}
	.checkbox{
		display: flex;
		align-items: center;
	}
	.checkbox>input{
		width: .4rem;
		height: .4rem;
		margin-left: .5rem;
	}
	.zxhfx2>p:nth-of-type(2){
		margin-top: .4rem;
	}
	.zxhfx2>p:nth-of-type(3)>span:nth-of-type(1){
			font-size: .5rem;
	}
	.zxhfx2>p:nth-of-type(3)>span:nth-of-type(2){
		text-decoration: line-through;
	}
	.zxhfx2>p:nth-of-type(3){
		margin-top: .13434rem;
	}
	.zxhfx2{
		margin-top: .6rem;
		margin-left: .2rem;
	}
	.zxhfx2a{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.zxhfx2a>p{
		margin-right: .3rem;
		font-size: .5rem;
	}
	.sorzx>p:nth-of-type(2){
		margin-left: .2rem;
	}
	.sorzx>p>span{
		color: #ff6900;
	}
	.sorzx{
		display: flex;
	}
	.xgcart1>.op2{
		background: #ff6900;
		position: fixed;
		right: 1rem;
		bottom: 3rem;
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
		text-align: center;
		line-height: 1.2rem;
		color: #fff;
		font-size: .6rem;
		opacity: .8;
	}
	
	
	
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_dginne0p7c1h5mi.eot');
  src: url('//at.alicdn.com/t/font_347964_dginne0p7c1h5mi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_dginne0p7c1h5mi.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_dginne0p7c1h5mi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_dginne0p7c1h5mi.svg#iconfont') format('svg');
}
.iconfont{
	font-family: 'iconfont';
	font-size: 1rem;
	color: #ff6900;
}
header{
	height: 1.3rem;
	line-height: 1.3rem;
	background:white;
	position: fixed;
	top: 0;
	left:0;
	right: 0;
	z-index: 100;
	border-bottom: 1px solid #E5E5E5;
}
header p{	
    text-align: center;
    font-size: .5rem;
    display: flex;
	justify-content: space-between;
	text-align: center;
}
.bianji{
	font-size: 32px;
	margin-right: .8rem;
}
.gouwu{
	font-size: 35px;
}
</style>